import React, { useState } from 'react'
import {
  Spin,
  DatePicker,
  Form,
  Input,
  Modal,
  message,
  Select,
  Upload
} from 'antd'
import dayjs from 'dayjs'
import { PlusOutlined } from '@ant-design/icons'
import {
  postClueAlarmInformationFeedback,
  fetchUpload
} from '&/api/electricity'
const ModalForm = ({ records, visible, setVisible }) => {
  const [form] = Form.useForm()
  const value = JSON.parse(localStorage.getItem('user'))
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [previewOpen, setPreviewOpen] = useState(false)
  const [previewImage, setPreviewImage] = useState('')
  const [previewTitle, setPreviewTitle] = useState('')
  const [fileList, setFileList] = useState([])
  const [loading, setLoading] = useState(false)
  // 定义取消操作函数，用于关闭表单并重置表单数据
  const handleCancel = () => {
    setVisible(false) // 隐藏表单或弹窗
    form.resetFields() // 重置表单所有字段至初始状态
  }

  // 定义确认操作函数，验证表单、处理反馈信息并发送请求
  const handleOk = async () => {
    if(loading) return
    // 验证表单数据
    const validatedValues = await form.validateFields()

    // 提取警告信息数组
    let warnArr
    if (records.children) {
      warnArr = records.children.map((item) => ({
        warn_code: item.warn_code,
        ent_name: item.ent_name
      }))
    } else {
      warnArr = [
        {
          warn_code: records.warn_code,
          ent_name: records.ent_name
        }
      ]
    }

    // 如果存在文件列表，将File对象转换为原始File对象
    if (validatedValues.files) {
      let imgUrl = await Promise.all(
        validatedValues.files.map((item) => {
          return new Promise((r) => {
            fetchUpload({
              files: item.originFileObj,
              subsystem_code: 'electricity-service',
              subsystem_api: '/api/action/feedback'
            }).then((res) => {
              r(res)
            })
          })
        })
      )
      let upLoadArr = imgUrl
        .map((item) => {
          // 拼接一下图片的链接
          return `https://f.hotgrid.cn/${item.result[0].url}`.toString()
        })
        .join(',')
        .split(',')
      validatedValues.files = JSON.stringify(upLoadArr)
    }
    // 创建反馈信息对象（包含格式化的时间和附加属性）
    let temp1 = {
      ...validatedValues,
      feedback_time: dayjs(validatedValues.feedback_time).format(
        'YYYY-MM-DD HH:mm:ss'
      ), // 格式化时间
      project_id: value.project_id, // 从上下文获取项目ID
      userid: value.userid, // 从上下文获取用户ID
      warn_info: JSON.stringify(warnArr) // 将警告信息数组转化为JSON字符串
    }
    setLoading(true)
    // 发送POST请求
    const result = await postClueAlarmInformationFeedback(temp1)
    setLoading(false)
    // 显示成功提示信息
    message.success(result.data.result)
    // 清空已上传文件列表
    setFileList([])
    // 关闭表单或弹窗
    handleCancel()
  }

  // 图片预览功能
  const handlePreview = async (file) => {
    // 如果图片没有预览链接，则生成Base64编码的预览链接
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj)
    }

    // 设置当前预览的图片链接
    setPreviewImage(file.url || file.preview)

    // 打开图片预览窗口
    setPreviewOpen(true)

    // 设置预览标题（使用文件名或URL路径的最后一部分）
    setPreviewTitle(
      file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
    )
  }

  // 文件选择框的值变化事件处理器
  const handleChange = ({ fileList: newFileList }) => {
    // 更新已上传文件列表状态
    setFileList(newFileList)
  }

  // 图片预览窗口关闭事件处理器
  const handleCancelImg = () => {
    // 关闭图片预览窗口
    setPreviewOpen(false)
  }

  // 规范化文件输入组件返回的数据
  const normFile = (eventOrFileList) => {
    // 如果返回的是数组，则直接返回
    if (Array.isArray(eventOrFileList)) {
      return eventOrFileList
    }

    // 否则，尝试提取fileList属性（兼容某些场景下的onChange回调参数）
    return eventOrFileList?.fileList
  }

  // 异步获取文件的Base64编码
  const getBase64 = (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader()

      // 当读取完成时，解析结果并解决Promise
      reader.onload = () => resolve(reader.result)

      // 当读取失败时，拒绝Promise
      reader.onerror = (error) => reject(error)

      // 开始读取文件内容
      reader.readAsDataURL(file)
    })

  return (
    <>
      <Modal
        title="反馈信息"
        open={visible}
        onCancel={handleCancel}
        centered
        maskClosable={false}
        keyboard={false}
        wrapClassName="push_modal"
        width={800}
        confirmLoading={confirmLoading}
        onOk={handleOk}
      >
        <Spin spinning={loading}>
          <Form
            form={form}
            labelCol={{
              span: 4
            }}
            wrapperCol={{
              span: 18
            }}
            layout="horizontal"
          >
            {/* <Form.Item name="task_code" hidden>
            <Input />
          </Form.Item> */}
            <Form.Item
              label="反馈信息"
              name="feedback_content"
              rules={[
                {
                  required: true,
                  message: '反馈信息不可以为空'
                }
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="反馈人员"
              name="feedback_people"
              rules={[
                {
                  required: true,
                  message: '反馈人员不可以为空'
                }
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="联系电话"
              name="phone"
              rules={[
                {
                  required: true,
                  message: '联系电话不可以为空'
                }
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="是否发现问题"
              name="is_problem"
              rules={[
                {
                  required: true,
                  message: '是否发现问题不可以为空'
                }
              ]}
            >
              <Select
                options={[
                  {
                    value: 1,
                    label: '否'
                  },
                  {
                    value: 2,
                    label: '是'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item
              label="是否现场核实"
              name="is_verify"
              rules={[
                {
                  required: true,
                  message: '是否现场核实不可以为空'
                }
              ]}
            >
              <Select
                options={[
                  {
                    value: 1,
                    label: '否'
                  },
                  {
                    value: 2,
                    label: '是'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item
              label="反馈时间"
              name="feedback_time"
              rules={[
                {
                  required: true,
                  message: '反馈时间不可以为空'
                }
              ]}
            >
              <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
            </Form.Item>
            <Form.Item
              label="图片"
              // valuePropName="file"
              name="files"
              getValueFromEvent={normFile}
            >
              <Upload
                listType="picture-card"
                fileList={fileList}
                onPreview={handlePreview}
                onChange={handleChange}
                beforeUpload={(file) => {
                  return false
                }}
              >
                <div>
                  <PlusOutlined />
                </div>
              </Upload>
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
      <Modal
        wrapClassName={'model-css-big-img'}
        open={previewOpen}
        title={previewTitle}
        footer={null}
        onCancel={handleCancelImg}
      >
        <img alt="example" style={{ width: '99%' }} src={previewImage} />
      </Modal>
    </>
  )
}
export default ModalForm
